<template>
  <div class="container">
    <nav-header></nav-header>
    <!-- 面包屑 -->
    <nav-bread>
      <span>cart</span>
    </nav-bread>
    <div class="cart">
      <div class="page-title-normal">
        <h2 class="page-title-h2"><span>My Cart</span></h2>
      </div>
      <div class="item-list-wrap">
        <div class="cart-item">
          <div class="cart-item-head">
            <ul>
              <li>Items</li>
              <li>Price</li>
              <li>Quantity</li>
              <li>Subtotal</li>
              <li>Edit</li>
            </ul>
          </div>
          <ul class="cart-item-list">
            <li v-for="item in cartList">
              <div class="cart-tab-1">
                <div class="cart-item-check">
                  <a href="javascript:void(0)" class="checkbox-btn item-check-btn" v-bind:class="{'check':item.checked=='1'}" @click="editCart('checked',item)">
                    <svg class="icon icon-ok">
                          <use xlink:href="#icon-ok"></use>
                        </svg>
                  </a>
                </div>
                <div class="cart-item-pic">
                  <img :src="'static/'+item.productImage" :ref="item.productName">
                </div>
                <div class="cart-item-title">
                  <div class="item-name">{{item.productName}}</div>
                </div>
              </div>
              <div class="cart-tab-2">
                <div class="item-price">{{item.salePrice| currency("$")}}</div>
              </div>
              <div class="cart-tab-3">
                <div class="item-quantity">
                  <div class="select-self select-self-open">
                    <div class="select-self-area">
                      <a class="input-sub" @click="editCart('minu',item)">-</a>
                      <span class="select-ipt">{{item.productNum}}</span>
                      <a class="input-add" @click="editCart('add',item)">+</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cart-tab-4">
                <div class="item-price-total">{{(item.productNum*item.salePrice)| currency("$")}}</div>
              </div>
              <div class="cart-tab-5">
                <div class="cart-item-opration">
                  <a href="javascript:;" class="item-edit-btn" @click="delCartConfirm(item.productId)">
                    <svg class="icon icon-del">
                          <use xlink:href="#icon-del"></use>
                        </svg>
                  </a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="cart-foot-wrap">
        <div class="cart-foot-inner">
          <div class="cart-foot-l">
            <div class="item-all-check">
              <a href="javascipt:;" @click="checkAll" >
                <span class="checkbox-btn item-check-btn" v-bind:class="{'check':checkAllFlag}">
                            <svg class="icon icon-ok"><use xlink:href="#icon-ok"/></svg>
                        </span>
                <span>Select all</span>
              </a>
            </div>
          </div>
          <div class="cart-foot-r">
            <div class="item-total">
              Item total: <span class="total-price">{{countTotal | currency("$")}}</span>
            </div>
            <div class="btn-wrap">
              <a class="btn btn--red" v-bind:class="{'btn--dis':checkCount==0}" @click="checkOut">Checkout</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <model v-bind:mdShow="modalConfirm" v-on:close="closeModal">
      <p slot="message">
        真的要删除这个商品么？
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" @click="cartDel">确定</a>
        <a class="btn btn--m" @click="modalConfirm = false">关闭</a>
      </div>
    </model>
    <nav-footer></nav-footer>
  </div>
</template>

<style>
.input-sub,
.input-add {
  min-width: 40px;
  height: 100%;
  border: 0;
  color: #605f5f;
  text-align: center;
  font-size: 16px;
  overflow: hidden;
  display: inline-block;
  background: #f0f0f0;
}

.item-quantity .select-self-area {
  background: none;
  border: 1px solid #f0f0f0;
}

.item-quantity .select-self-area .select-ipt {
  display: inline-block;
  padding: 0 3px;
  width: 30px;
  min-width: 30px;
  text-align: center;
}
</style>

<script>
import navHeader from "@/components/Header";
import navFooter from "@/components/Footer";
import navBread from "@/components/Bread";
import model from "@/components/Model";
import axios from "axios";

export default {
  data() {
    return {
      cartList: [],
      modalConfirm: false,
      productId: ""
    };
  },
  components: {
    navHeader,
    navFooter,
    navBread,
    model
  },
  mounted() {
    this.init();
  },
  // filters: {
  //   currency: currency
  // },
  computed: {
    checkAllFlag() {
      return this.checkCount == this.cartList.length;
    },
    checkCount() {
      var i = 0;
      this.cartList.forEach(item => {
        if (item.checked == "1") {
          i++;
        }
      });
      return i;
    },
    countTotal() {
      var total = 0;
      this.cartList.forEach(item => {
        if (item.checked == "1") {
          total += parseInt(item.productNum) * parseFloat(item.salePrice);
        }
      });
      return total;
    }
  },
  methods: {
    init() {
      axios.get("/users/cartList").then(response => {
        var res = response.data;
        if (res.status == 0) {
          this.cartList = res.result;
        } else alert(res.msg);
      });
    },
    delCartConfirm(productId) {
      this.productId = productId;
      this.modalConfirm = true;
    },
    cartDel() {
      axios
        .post("/users/cartDel", {
          productId: this.productId
        })
        .then(response => {
          var res = response.data;
          if (res.status == 0) {
            this.modalConfirm = false;
            this.init();
          }
        });
    },
    closeModal() {
      this.modalConfirm = false;
    },
    editCart(flag, item) {
      if (flag == "add") {
        item.productNum++;
      } else if (flag == "minu") {
        if (item.productNum <= 1) {
          return;
        }
        item.productNum--;
      } else {
        item.checked = item.checked == "1" ? "0" : "1";
      }

      axios
        .post("/users/editCart", {
          productId: item.productId,
          productNum: item.productNum,
          checked: item.checked
        })
        .then(response => {
          var res = response.data;
          if (res.status == 0) {
          }
        });
    },
    checkAll() {
      var flag = !this.checkAllFlag;
      this.cartList.forEach(element => {
        element.checked = flag;
      });
      axios
        .post("/users/editCheckAll", {
          checkAll: flag
        })
        .then(response => {
          var res = response.data;
          if (res.status == 0) {
            console.log(res);
          }
        });
    },
    checkOut() {
      if (this.checkCount > 0) {
        this.$router.push({ path: "/address" });
      }
    }
  }
};
</script>
